<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>はじめに | Vue.js</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link href="static/css/css.css" rel="stylesheet">
    <link href="static/css/font-awesome.min.css" rel="stylesheet">
    <link rel="icon" href="static/picture/logo.png">
    <link rel="manifest" href="https://v3.ja.vuejs.org/manifest.json">
    <link rel="apple-touch-icon" href="https://v3.ja.vuejs.org/images/icons/apple-icon-152x152.png">
    <script src="https://player.vimeo.com/api/player.js"></script>
    <script src="static/js/72160148.js" defer="defer"></script>
    <meta name="description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
    <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="static/css/0.styles.56247ca4.css" as="style"><link rel="preload" href="https://v3.ja.vuejs.org/assets/js/app.a367b364.js" as="script"><link rel="preload" href="https://v3.ja.vuejs.org/assets/js/11.07f1a83c.js" as="script"><link rel="preload" href="https://v3.ja.vuejs.org/assets/js/117.66a62a55.js" as="script"><link rel="preload" href="https://v3.ja.vuejs.org/assets/js/24.55143c9a.js" as="script"><link rel="preload" href="https://v3.ja.vuejs.org/assets/js/25.e7bf9d00.js" as="script"><link rel="preload" href="https://v3.ja.vuejs.org/assets/js/16.6e4f07ac.js" as="script"><link rel="preload" href="https://v3.ja.vuejs.org/assets/js/18.1f0b8311.js" as="script"><link rel="preload" href="https://v3.ja.vuejs.org/assets/js/17.8cc10808.js" as="script"><link rel="preload" href="https://v3.ja.vuejs.org/assets/js/22.92da0aa8.js" as="script"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/1.fdf94f2f.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/100.c29c136b.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/101.ab4d334e.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/102.148c80b9.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/103.169a8bd3.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/104.83a5e94a.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/105.9b713075.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/106.35b632c5.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/107.ea50a964.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/108.e2d0a280.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/109.18378628.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/110.eebf3245.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/111.b49014d8.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/112.3ba498dc.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/113.5762b8cc.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/114.68a3da69.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/115.c13ff22e.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/116.9d05f44e.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/118.0ed7f722.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/119.ec174921.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/12.42d989f1.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/120.c24eb2a4.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/121.1bc96261.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/122.2a1d75e0.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/123.56b155b5.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/124.fedb693b.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/125.6476c466.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/126.16bfc48e.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/127.8c2f8418.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/128.37d474ec.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/129.5374a9f6.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/13.c3678e36.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/130.d56c02da.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/131.9a004f24.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/132.5afc7464.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/133.f36be53f.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/134.6139b154.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/135.efa94c1a.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/136.6506dfd8.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/137.bde681e9.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/138.f4b7b529.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/139.0272edb2.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/14.8681f098.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/140.7109595e.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/141.b3c1e95a.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/142.3e10cdbe.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/143.68499709.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/144.643708af.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/145.1e7e1b90.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/146.a98c6b47.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/147.b5ac23fa.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/148.67655a7f.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/149.8e6de3b5.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/15.6d90fce4.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/150.8c294e83.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/151.3a5e54e4.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/152.92e8df09.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/153.039be9ca.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/154.aa65b5e8.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/155.096b0d6c.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/156.7ed3fb97.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/157.5e5a5cd5.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/158.3bbf0221.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/159.7ff5c083.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/160.53a3f070.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/161.93c7ac8a.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/162.57e1cd38.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/163.ee7b1be0.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/164.0a23a58b.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/165.34c07bae.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/166.b8835a2b.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/167.cd88aaf0.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/168.5ec23db3.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/169.f4fe6d94.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/170.b9d182c0.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/171.92442c3b.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/172.b922e6b9.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/173.c1aa74c3.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/174.47b2786d.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/175.ea50aa6c.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/176.49db7c61.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/177.a07d1d4f.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/178.631faefc.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/179.f1eb5bee.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/180.b76cee9d.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/181.03226f50.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/182.005c15e0.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/183.5eabe829.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/184.8ae8ac58.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/185.e3824b80.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/186.88bb6005.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/187.3ea22087.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/188.9f24161f.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/19.8aa5fca8.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/2.07b5e890.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/20.16db6b53.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/21.db8b0579.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/23.b7f6e361.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/26.d19a3a4b.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/27.da33b5ed.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/28.194d990c.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/29.dc596ac2.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/3.649f99a9.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/30.cfd999a5.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/31.360512aa.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/32.a59edcd8.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/33.d0a72ee2.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/34.b7d349a4.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/35.9c763fd0.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/36.3a66c340.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/37.c2251ecb.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/38.c7e70131.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/39.de3329ef.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/4.c40b5cad.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/40.77d10c67.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/41.83e3e6c0.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/42.84310e60.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/43.158d2183.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/44.d72c7562.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/45.73f29da0.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/46.7cf073d3.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/47.1863de12.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/48.2c0a9c1b.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/49.504d593c.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/5.289b0bd5.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/50.2de09124.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/51.8296e90e.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/52.0544dd2d.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/53.aed45ebd.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/54.cfb784d6.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/55.c3f196e7.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/56.0fc9e46c.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/57.c740a8ac.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/58.6ca10767.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/59.3c57a024.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/6.2e1beaf1.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/60.fb03b40e.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/61.b1dbb292.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/62.049d1bf7.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/63.5cf7da5b.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/64.3181c546.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/65.e0ed2109.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/66.35a7f727.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/67.607cceab.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/68.3370cd03.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/69.08fc5b23.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/7.bcdffae9.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/70.a336f4c4.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/71.9571c270.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/72.8178327b.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/73.e8d9dad9.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/74.13888484.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/75.8b23baeb.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/76.6ce8411f.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/77.1f854a07.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/78.916c1577.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/79.62f7dff3.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/80.b5e5c7eb.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/81.cca5e019.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/82.038079ed.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/83.cfbd620a.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/84.e7994c28.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/85.b78903c4.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/86.eed67eb4.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/87.7ae03f7a.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/88.715bfa4c.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/89.f2e1af4f.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/90.764fc4aa.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/91.68a19b4c.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/92.960abb49.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/93.b7fc8e72.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/94.58ea3faf.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/95.b1ee5073.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/96.adb36d73.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/97.13a7f643.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/98.79ba41ba.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/99.bd32d186.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/vendors~docsearch.aaf3a359.js"><link rel="prefetch" href="https://v3.ja.vuejs.org/assets/js/vendors~search-page.6c0223c3.js">
    <link rel="stylesheet" href="static/css/0.styles.56247ca4.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewbox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="index14.html" class="home-link router-link-active"><img src="static/picture/logo.png" alt="Vue.js" class="logo"> <span class="site-name can-hide">Vue.js</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Documentation Menu" class="dropdown-title"><span class="title">ドキュメント</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  ガイド
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  スタイルガイド
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  クックブック
</a></li><li class="dropdown-item"><!----> <a href="markdown2.html" class="nav-link">
  例
</a></li><li class="dropdown-item"><!----> <a href="writing-guide2.html" class="nav-link">
  貢献
</a></li><li class="dropdown-item"><!----> <a href="introduction7.html" class="nav-link">
  Vue 2 からの移行
</a></li></ul></div></div><div class="nav-item"><a href="javascript:;" class="nav-link">
  API リファレンス
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="エコシステム" class="dropdown-title"><span class="title">エコシステム</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          コミュニティ
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  チーム
</a></li><li class="dropdown-subitem"><a href="partners3.html" class="nav-link">
  パートナー
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  参加する
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  テーマ
</a></li></ul></li><li class="dropdown-item"><h4>
          公式プロジェクト
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="index4.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index5.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index6.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue CLI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index7.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Test Utils
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index8.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Devtools
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index9.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  ウィークリーニュース
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index10.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  ブログ
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Vue を支援する" class="dropdown-title"><span class="title">Vue を支援する</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  1 回きりの支援
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  継続的な支援
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Tシャツショップ
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="翻訳" class="dropdown-title"><span class="title">翻訳</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="index12.html" target="_blank" class="nav-link external">
  English
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index.html" target="_blank" class="nav-link external">
  中文
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index13.html" target="_blank" class="nav-link external">
  한국어
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index15.html" target="_blank" class="nav-link external">
  Русский
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="translations1.html#community-translations" class="nav-link">
  その他の翻訳
</a></li></ul></div></div> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <div id="docsearch"></div></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Documentation Menu" class="dropdown-title"><span class="title">ドキュメント</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  ガイド
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  スタイルガイド
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  クックブック
</a></li><li class="dropdown-item"><!----> <a href="markdown2.html" class="nav-link">
  例
</a></li><li class="dropdown-item"><!----> <a href="writing-guide2.html" class="nav-link">
  貢献
</a></li><li class="dropdown-item"><!----> <a href="introduction7.html" class="nav-link">
  Vue 2 からの移行
</a></li></ul></div></div><div class="nav-item"><a href="javascript:;" class="nav-link">
  API リファレンス
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="エコシステム" class="dropdown-title"><span class="title">エコシステム</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          コミュニティ
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  チーム
</a></li><li class="dropdown-subitem"><a href="partners3.html" class="nav-link">
  パートナー
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  参加する
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  テーマ
</a></li></ul></li><li class="dropdown-item"><h4>
          公式プロジェクト
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="index4.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index5.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index6.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue CLI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index7.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Test Utils
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index8.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Devtools
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index9.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  ウィークリーニュース
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index10.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  ブログ
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Vue を支援する" class="dropdown-title"><span class="title">Vue を支援する</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  1 回きりの支援
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  継続的な支援
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Tシャツショップ
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="翻訳" class="dropdown-title"><span class="title">翻訳</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="index12.html" target="_blank" class="nav-link external">
  English
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index.html" target="_blank" class="nav-link external">
  中文
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index13.html" target="_blank" class="nav-link external">
  한국어
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index15.html" target="_blank" class="nav-link external">
  Русский
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="translations1.html#community-translations" class="nav-link">
  その他の翻訳
</a></li></ul></div></div> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基本的な使い方</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">インストール</a></li><li><a href="" aria-current="page" class="active sidebar-link">はじめに</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="#vue-js-とは" class="sidebar-link">Vue.js とは？</a></li><li class="sidebar-sub-header"><a href="#はじめに-2" class="sidebar-link">はじめに</a></li><li class="sidebar-sub-header"><a href="#宣言的レンダリング" class="sidebar-link">宣言的レンダリング</a></li><li class="sidebar-sub-header"><a href="#ユーザー入力の制御" class="sidebar-link">ユーザー入力の制御</a></li><li class="sidebar-sub-header"><a href="#条件分岐とループ" class="sidebar-link">条件分岐とループ</a></li><li class="sidebar-sub-header"><a href="#コンポーネントによる構成" class="sidebar-link">コンポーネントによる構成</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="#カスタム要素との関係" class="sidebar-link">カスタム要素との関係</a></li></ul></li><li class="sidebar-sub-header"><a href="#準備ができましたか" class="sidebar-link">準備ができましたか？</a></li></ul></li><li><a href="javascript:;" class="sidebar-link">アプリケーションとコンポーネントのインスタンス</a></li><li><a href="javascript:;" class="sidebar-link">テンプレート構文</a></li><li><a href="javascript:;" class="sidebar-link">データプロパティとメソッド</a></li><li><a href="javascript:;" class="sidebar-link">算出プロパティとウォッチャ</a></li><li><a href="javascript:;" class="sidebar-link">クラスとスタイルのバインディング</a></li><li><a href="javascript:;" class="sidebar-link">条件付きレンダリング</a></li><li><a href="javascript:;" class="sidebar-link">リストレンダリング</a></li><li><a href="javascript:;" class="sidebar-link">イベントハンドリング</a></li><li><a href="javascript:;" class="sidebar-link">フォーム入力バインディング</a></li><li><a href="javascript:;" class="sidebar-link">コンポーネントの基本</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>コンポーネントの詳細</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">コンポーネントの登録</a></li><li><a href="javascript:;" class="sidebar-link">プロパティ</a></li><li><a href="javascript:;" class="sidebar-link">プロパティでない属性</a></li><li><a href="javascript:;" class="sidebar-link">カスタムイベント</a></li><li><a href="javascript:;" class="sidebar-link">スロット</a></li><li><a href="javascript:;" class="sidebar-link">Provide / inject</a></li><li><a href="javascript:;" class="sidebar-link">動的 &amp; 非同期コンポーネント</a></li><li><a href="javascript:;" class="sidebar-link">テンプレート参照について</a></li><li><a href="javascript:;" class="sidebar-link">特別な問題に対処する</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>トランジションとアニメーション</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">概要</a></li><li><a href="javascript:;" class="sidebar-link">Enter &amp; Leave トランジション</a></li><li><a href="javascript:;" class="sidebar-link">リストのトランジション</a></li><li><a href="javascript:;" class="sidebar-link">状態のトランジション</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>再利用と構成</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>Composition API</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">はじめに</a></li><li><a href="javascript:;" class="sidebar-link">セットアップ</a></li><li><a href="javascript:;" class="sidebar-link">ライフサイクルフック</a></li><li><a href="javascript:;" class="sidebar-link">Provide / Inject</a></li><li><a href="javascript:;" class="sidebar-link">テンプレート参照</a></li></ul></section></li><li><a href="javascript:;" class="sidebar-link">ミックスイン</a></li><li><a href="javascript:;" class="sidebar-link">カスタムディレクティブ</a></li><li><a href="javascript:;" class="sidebar-link">Teleport</a></li><li><a href="javascript:;" class="sidebar-link">Render 関数</a></li><li><a href="javascript:;" class="sidebar-link">プラグイン</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>高度な使い方</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">Vue と Web コンポーネント</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>リアクティビティ</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="javascript:;" class="sidebar-link">レンダリングのメカニズムと最適化</a></li><li><a href="javascript:;" class="sidebar-link">Vue 2 での変更検出の注意事項</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>ツール</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">単一ファイルコンポーネント</a></li><li><a href="javascript:;" class="sidebar-link">テスト</a></li><li><a href="javascript:;" class="sidebar-link">TypeScript のサポート</a></li><li><a href="javascript:;" class="sidebar-link">モバイル</a></li><li><a href="javascript:;" class="sidebar-link">実運用への展開</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>スケールアップ</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">ルーティング</a></li><li><a href="javascript:;" class="sidebar-link">状態管理</a></li><li><a href="javascript:;" class="sidebar-link">サーバサイドレンダリング</a></li><li><a href="javascript:;" class="sidebar-link">セキュリティ</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>アクセシビリティ</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">基礎</a></li><li><a href="javascript:;" class="sidebar-link">セマンティクス</a></li><li><a href="javascript:;" class="sidebar-link">標準</a></li><li><a href="javascript:;" class="sidebar-link">リソース</a></li></ul></section></li></ul> </aside> <main class="page"><div class="carbon-ads"></div>  <div class="theme-default-content content__default"><h1 id="はじめに"><a href="#はじめに" class="header-anchor">#</a> はじめに</h1> <div class="custom-block tip"><p class="custom-block-title">NOTE</p> <p>すでに Vue 2 について知っていて、 Vue 3 の新機能について知りたいですか？ <a href="introduction7.html">移行ガイド</a> をご覧ください！</p></div> <h2 id="vue-js-とは"><a href="#vue-js-とは" class="header-anchor">#</a> Vue.js とは？</h2> <p>Vue (発音は /vju:/、<strong>view</strong> と同様) は、ユーザーインターフェイスを構築するための<strong>プログレッシブフレームワーク</strong>です。他のモノリシックなフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリはビュー層だけに焦点を当てており、使い始めるのも、他のライブラリや既存のプロジェクトに統合することも容易です。一方で、Vue を<a href="javascript:;">モダンなツール</a>や<a href="javascript:;" target="_blank" rel="noopener noreferrer">サポートライブラリ<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>と組み合わせることで、洗練されたシングルページアプリケーションを開発することもできます。</p> <p>ここから先に進む前に Vue についてより深く知りたい方のために、基本理念やサンプルプロジェクトについて説明する<a id="modal-player" href="#" class="vuemastery-trigger">ビデオを作成しました</a>。</p> <section class="video-lesson"><a href="javascript:;" target="_blank" rel="sponsored noopener" title="Vue Mastery の無料ビデオコースを見る">Vue Mastery の無料ビデオコースを見る</a></section> <div class="overlay" style="display:none;"><div class="modal"><div class="video-space" style="padding: 56.25% 0 0 0; position: relative;"><iframe src="javascript:;" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="allowfullscreen" allow="autoplay" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%; margin: 0"></iframe></div> <p class="modal-text">
      Video by
      <a href="javascript:;" target="_blank" rel="sponsored noopener" title="Vue.js Courses on Vue Mastery">Vue Mastery</a>. Watch Vue Mastery’s free
      <a href="javascript:;" target="_blank" rel="sponsored noopener" title="Vue.js Courses on Vue Mastery">Intro to Vue course</a>.
    </p></div></div> <h2 id="はじめに-2"><a href="#はじめに-2" class="header-anchor">#</a> はじめに</h2> <p><a href="javascript:;" class="nav-link primary" data-v-04ba8586="">
    インストール
  </a></p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>公式ガイドは、HTML、CSS そして JavaScript に関する中級レベルの知識を前提としています。フロントエンドの開発が初めてであれば、最初のステップとしてフレームワークに飛び込むのは良いアイデアではないかもしれません。基礎を掴んでから戻ってきましょう！他のフレームワークを使用したことのある経験は役に立ちますが、必須ではありません。</p></div> <p>Vue.js を試すには、<a href="javascript:;" target="_blank" rel="noopener noreferrer">Hello World の例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> が最も簡単です。気軽に別のタブで開いて、基本的な例を試してみましょう。</p> <p>Vue の他のインストール方法については、<a href="javascript:;">インストール</a> ページで紹介しています。注意点として、初心者が <code>vue-cli</code> で始めることは推奨<strong>しません</strong>（特に Node.js ベースのビルドツールに慣れていない場合）。</p> <h2 id="宣言的レンダリング"><a href="#宣言的レンダリング" class="header-anchor">#</a> 宣言的レンダリング</h2> <p>Vue.js のコアは、単純なテンプレート構文を使って宣言的にデータを DOM にレンダリングすることを可能にするシステムです:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>counter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  Counter: {{ counter }}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> Counter <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      counter<span class="token operator">:</span> <span class="token number">0</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>Counter<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#counter'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>これで、初めての Vue アプリケーションが作成できました！一見するとただ文字列をレンダリングするだけのテンプレートですが、Vue は内部で多くの処理をおこなっています。データと DOM は関連付けられ、すべてが <strong>リアクティブ（反応的）</strong> になっています。どうすればそれが分かるのでしょうか？以下の例で、<code>counter</code> プロパティが 1 秒ごとにインクリメントされたとき、レンダリングされた DOM がどのように変化するかを見てみましょう:</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> Counter <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      counter<span class="token operator">:</span> <span class="token number">0</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>counter<span class="token operator">++</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="demo" data-v-276250da=""><p data-v-276250da="">Counter: 0</p> <button data-v-276250da="">Stop timer</button></div> <p>文字列の展開に加えて、以下のように要素の属性をバインド（束縛）することもできます:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bind-attribute<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    Hover your mouse over me for a few seconds to see my dynamically bound
    title!
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> AttributeBinding <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      message<span class="token operator">:</span> <span class="token string">'You loaded this page on '</span> <span class="token operator">+</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toLocaleString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>AttributeBinding<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#bind-attribute'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="result" data-user="Vue" data-slug-hash="KKpRVvJ" data-pen-title="Attribute dynamic binding" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">Attribute dynamic binding</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <p>ここで新しい属性が出てきました。<code>v-bind</code> 属性は<strong>ディレクティブ</strong>と呼ばれます。ディレクティブは Vue によって提供された特別な属性であることを示すために <code>v-</code> 接頭辞がついています。これはあなたの推測通り、レンダリングされた DOM に特定のリアクティブな振る舞いを与えます。ここで宣言されているのは、「<em>この要素の <code>title</code> 属性を、現在アクティブなインスタンスにおける <code>message</code> プロパティの最新状態に維持する</em>」ということになります。</p> <h2 id="ユーザー入力の制御"><a href="#ユーザー入力の制御" class="header-anchor">#</a> ユーザー入力の制御</h2> <p>ユーザがアプリケーションと対話できるように、<code>v-on</code> ディレクティブを使ってイベントリスナをアタッチし、インスタンスのメソッドを呼び出すことができます:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>event-handling<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reverseMessage<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Reverse Message<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> EventHandling <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      message<span class="token operator">:</span> <span class="token string">'Hello Vue.js!'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">reverseMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>message <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>message
        <span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>EventHandling<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#event-handling'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="result" data-user="Vue" data-slug-hash="dyoeGjW" data-pen-title="Event handling" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">Event handling</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <p>この方法では、DOM を触るのではなくアプリケーションの状態を更新することに注意してください。DOM の操作はすべて Vue によって処理されるので、背後にあるロジックを書くことに集中することができます。</p> <p>Vue はまた、フォームの入力とアプリケーションの状態を双方向にバインディングするための <code>v-model</code> ディレクティブも提供します:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>two-way-binding<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> TwoWayBinding <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      message<span class="token operator">:</span> <span class="token string">'Hello Vue!'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>TwoWayBinding<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#two-way-binding'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="result" data-user="Vue" data-slug-hash="poJVgZm" data-pen-title="Two-way binding" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">Two-way binding</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <h2 id="条件分岐とループ"><a href="#条件分岐とループ" class="header-anchor">#</a> 条件分岐とループ</h2> <p>要素の有無を切り替えることも非常に簡単です:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>conditional-rendering<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>seen<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Now you see me<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> ConditionalRendering <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      seen<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>ConditionalRendering<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#conditional-rendering'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>この例は、テキストや属性だけでなく、DOM の<strong>構造</strong>にもデータを束縛できることを示しています。さらに Vue には、要素が Vue によって挿入/更新/削除されたとき、自動的に<a href="javascript:;">トランジションエフェクト(遷移効果)</a>を適用する強力なトランジションエフェクトシステムも提供します。</p> <p>以下のサンドボックスで <code>seen</code> を <code>true</code> から <code>false</code> に変更すると、エフェクトを確認することができます:</p> <p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="js,result" data-user="Vue" data-slug-hash="oNXdbpB" data-pen-title="Conditional rendering" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">Conditional rendering</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <p>Vue.js には他にもかなりの数のディレクティブがあり、それぞれが特定の機能を持っています。例えば、<code>v-for</code> ディレクティブを使えばアイテムのリストを配列内のデータを使って表示することができます:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-rendering<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>todo in todos<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      {{ todo.text }}
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> ListRendering <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      todos<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Learn JavaScript'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Learn Vue'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Build something awesome'</span> <span class="token punctuation">}</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>ListRendering<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#list-rendering'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="result" data-user="Vue" data-slug-hash="mdJLVXq" data-pen-title="List rendering" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">List rendering</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <h2 id="コンポーネントによる構成"><a href="#コンポーネントによる構成" class="header-anchor">#</a> コンポーネントによる構成</h2> <p>コンポーネントシステムは Vue におけるもうひとつの重要なコンセプトです。それは「小さく、自己完結的で、（多くの場合）再利用可能なコンポーネント」を組み合わせることで、大規模アプリケーションの構築を可能にする概念です。考えてみれば、ほぼすべてのタイプのアプリケーションインターフェイスは、コンポーネントツリーとして抽象化できます。</p> <p><img src="static/picture/components.png" alt="コンポーネントツリー"></p> <p>Vue において、コンポーネントは本質的にはあらかじめ定義されたオプションを持つインスタンスです。Vue を使ってコンポーネントを登録するのはいたって簡単で、<code>app</code> オブジェクトと同様にコンポーネントオブジェクトを作成し、親の <code>components</code> オプションで定義します:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> TodoItem <span class="token operator">=</span> <span class="token punctuation">{</span>
  template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;li&gt;This is a todo&lt;/li&gt;</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>

<span class="token comment">// Vue アプリケーションを生成する</span>
<span class="token keyword">const</span> app <span class="token operator">=</span> Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  components<span class="token operator">:</span> <span class="token punctuation">{</span>
    TodoItem <span class="token comment">// 新しいコンポーネントを登録する</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token operator">...</span> <span class="token comment">// その他のコンポーネントのプロパティ</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// Vue アプリケーションをマウントする</span>
app<span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>これで他のコンポーネントのテンプレートからこのコンポーネントを利用できるようになります:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- todo-item コンポーネントのインスタンスを生成する --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>todo-item</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>todo-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>しかし、これでは全ての todo で同じ文字列がレンダリングされてしまうだけで、あまり面白くありません。親のスコープから子コンポーネントへとデータを渡せるようにすべきです。<a href="javascript:;">プロパティ</a>を受け取れるようにコンポーネントの定義を変えてみましょう:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> TodoItem <span class="token operator">=</span> <span class="token punctuation">{</span>
  props<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'todo'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><span class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token interpolation"><span class="token punctuation">{{</span><span class="token inline-js language-js"> todo<span class="token punctuation">.</span>text </span><span class="token punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span></span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>こうすることで、繰り返されるコンポーネントそれぞれに <code>v-bind</code> を使って todo を渡すことができます:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>todo-list-app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--
      各 todo-item にその内容を表す todo オブジェクトを指定することで、
      内容が動的に変化します。
      後述する &quot;key&quot; も各コンポーネントに
      指定する必要があります。
    --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>todo-item</span>
      <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in groceryList<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name"><span class="token namespace">v-bind:</span>todo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name"><span class="token namespace">v-bind:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.id<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>todo-item</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> TodoItem <span class="token operator">=</span> <span class="token punctuation">{</span>
  props<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'todo'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><span class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token interpolation"><span class="token punctuation">{{</span><span class="token inline-js language-js"> todo<span class="token punctuation">.</span>text </span><span class="token punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span></span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> TodoList <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      groceryList<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">'Vegetables'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">'Cheese'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">'Whatever else humans are supposed to eat'</span> <span class="token punctuation">}</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  components<span class="token operator">:</span> <span class="token punctuation">{</span>
    TodoItem
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> app <span class="token operator">=</span> Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>TodoList<span class="token punctuation">)</span>

app<span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#todo-list-app'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="result" data-user="Vue" data-slug-hash="VwLxeEz" data-pen-title="Intro-Components-1" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">Intro-Components-1</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <p>このサンプルは不自然ではありますが、アプリケーションをより小さな単位に分割することに成功し、またプロパティのインターフェイスによって子コンポーネントは適切に疎結合な状態になりました。ここからさらに <code>&lt;todo-item&gt;</code> コンポーネントを、より複雑なテンプレートやロジックを使って、親コンポーネントに影響を与えることなく改良することができます。</p> <p>大規模なアプリケーションでは、開発をおこないやすくするために、アプリケーション全体をコンポーネントに分割することが必要です。コンポーネントについては<a href="javascript:;">ガイドの後半</a>でより詳しく述べますが、コンポーネントを使ったアプリケーションのテンプレートがどういうものになるか、(架空の)例をここに載せておきます:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>app-nav</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>app-nav</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>app-view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>app-sidebar</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>app-sidebar</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>app-content</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>app-content</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>app-view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="カスタム要素との関係"><a href="#カスタム要素との関係" class="header-anchor">#</a> カスタム要素との関係</h3> <p>Vue のコンポーネントが <a href="javascript:;" target="_blank" rel="noopener noreferrer">Web Components 仕様<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> の一部である <strong>カスタム要素 (Custom Elements)</strong> に似ていることに気付いたかもしれません。実際、Vue のコンポーネント設計の一部（例えばスロット API）は、ブラウザにネイティブ実装される前の仕様に影響を受けています。</p> <p>主な違いは、Vue のコンポーネントモデルが小さくはないアプリケーションを構築するために必要な多くの追加機能を提供する一貫したフレームワークの一部として設計されていることです。例えば、リアクティブなテンプレート作成や状態管理など、どちらも仕様書では取り扱われていません。</p> <p>また、Vue はカスタム要素の実行と作成の両方に優れたサポートを提供しています。詳細については、<a href="javascript:;">Vue and Web Components</a> のセクションをご覧ください。</p> <h2 id="準備ができましたか"><a href="#準備ができましたか" class="header-anchor">#</a> 準備ができましたか？</h2> <p>Vue.js コアの基本的な機能について簡単に紹介しました。このガイドの残りの部分では、基本的な機能だけでなく他の高度な機能についてもっと詳しく扱うので、全てに目を通すようにしてください！</p></div> <footer class="page-edit" data-v-7b53025e=""><div class="container" data-v-7b53025e=""><p data-v-7b53025e="">
      Deployed on
      <a href="javascript:;" data-v-7b53025e="">Netlify</a>.
      <br data-v-7b53025e=""> <span class="edit-link" data-v-7b53025e="">
        Caught a mistake or want to contribute to the documentation?
          <a href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-7b53025e="">
            GitHub でこのページを編集！
            <span data-v-7b53025e=""><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></span> <br data-v-7b53025e=""> <span class="prefix" data-v-7b53025e="">最終更新日:</span> <span class="time" data-v-7b53025e="">2021-12-24, 08:55:07 UTC</span></p></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="javascript:;" class="prev">インストール</a></span> <span class="next"><a href="javascript:;">アプリケーションとコンポーネントのインスタンス</a>
      →
    </span></p></div> <div class="bsa-cpc-wrapper"><div class="bsa-cpc"></div></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="static/js/app.a367b364.js" defer=""></script><script src="static/js/11.07f1a83c.js" defer=""></script><script src="static/js/117.66a62a55.js" defer=""></script><script src="static/js/24.55143c9a.js" defer=""></script><script src="static/js/25.e7bf9d00.js" defer=""></script><script src="static/js/16.6e4f07ac.js" defer=""></script><script src="static/js/18.1f0b8311.js" defer=""></script><script src="static/js/17.8cc10808.js" defer=""></script><script src="static/js/22.92da0aa8.js" defer=""></script>
  </body>
</html>
